<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <span>Message: {{ msg }}</span>
        <br />
        <span v-once>这个将不会改变: {{ msg_2 }}</span>

        <!--原始的html-->
        <p>Using mustaches: {{ rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>

        <!--Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：-->
        <div v-bind:id="dynamicId">我是一个好人，你呢？</div>
        <button v-bind:disabled="isButtonDisabled">Button</button>
        <!--使用 JavaScript 表达式-->
        <br />
        {{ number + 1 }}
        <br />
        {{ ok ? 'YES' : 'NO' }}
        <br />
        {{ message.split('').reverse().join('') }}
        <br />
        <div v-bind:id="'list-' + id"></div>
    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el: '#app',
            data: {
                msg: "hello world!",
                msg_2: "hello world 2! ",
                rawHtml: "<span style='color: red'>This should be red.</span>",
                dynamicId: 1,
                isButtonDisabled: false,
                number: 2,
                ok: true,
                message: "hello message",
                id: "i'm id"
            }
        });
        vue.msg = "hello world changed!"
        vue.msg_2 = "hello world 2 changed!"
    </script>
</body>

</html>